<template>
  <div class="score-submit-container-padding">
    <el-card
      v-for="(item, index) in list"
      :key="index"
      shadow="never"
      :body-style="{ color: '#606266', lineHeight: 1.5 }"
    >
      <template #header>
        <div class="header">
          <span class="sort">{{ index + 1 }}</span>
          <el-button type="primary" link @click="handleRemove(index)">
            移除
          </el-button>
        </div>
        <topicSelect v-model="item.topicId" :type="5" has-project />
        <el-form style="max-width: 800px; margin-top: 40px" label-width="auto">
          <el-form-item label="研究内容得分：">
            <el-input-number v-model="item.contentScore" />
          </el-form-item>
          <el-form-item label="阶段目标得分：">
            <el-input-number v-model="item.stageScore" />
          </el-form-item>
          <el-form-item label="总得分：">
            <el-input-number
              :model-value="item.contentScore + item.stageScore"
              disabled
            />
          </el-form-item>
          <el-form-item label="备注：">
            <el-input v-model="item.remark" type="textarea" />
          </el-form-item>
        </el-form>
      </template>
    </el-card>
    <el-button
      style="margin-top: 20px"
      type="primary"
      :icon="Plus"
      @click="handleAdd"
    >
      增加课题
    </el-button>

    <commonFooterBar>
      <el-button :loading="loading" @click="submitForm()">保存为草稿</el-button>
      <el-button type="primary" :loading="loading" @click="submitForm(2)">
        确认提交
      </el-button>
    </commonFooterBar>
  </div>
</template>

<script setup>
  import { Plus } from '@element-plus/icons-vue'
  import topicSelect from '@/components/topicSelect.vue'
  import commonFooterBar from '@/components/commonFooterBar.vue'
  import {
    projectScoreCreate,
    projectScoreUpdate,
    projectScoreGet,
  } from '@/api/project/course/score'
  import { postDraftBoxCreate } from '@/api/project/drafts'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'

  const { closeTabNavigate } = useCloseTabNavigate()

  const $baseMessage = inject('$baseMessage')

  const route = useRoute()

  const loading = ref(false)

  const list = ref([
    {
      topicId: '',
      contentScore: 0,
      stageScore: 0,
      remark: '',
    },
  ])

  const handleAdd = () => {
    list.value.push({
      topicId: '',
      contentScore: 0,
      stageScore: 0,
      remark: '',
    })
  }

  const handleRemove = (index) => {
    list.value.splice(index, 1)
  }

  //初始化数据
  const initFormData = () => {
    if (!route.query.id) return
    projectScoreGet({
      id: route.query.id,
      getType: route.query.getType || 2,
    }).then((res) => {
      if (res.code == 0 || res.code == 200) {
        const data = res.data || {}
        list.value = data.detailVOS || []
      }
    })
  }

  const submitForm = (type = 1) => {
    if (!list.value.length) {
      $baseMessage('请添加课题', 'error')
      return false
    }
    for (let i = 0; i < list.value.length; i++) {
      for (const key in list.value[i]) {
        if (list.value[i][key] == '') {
          $baseMessage('请填写完整的评分信息', 'error')
          return false
        }
      }
    }

    const params = {
      detailVOS: list.value.map((item) => {
        return {
          ...item,
          totalScore: item.contentScore + item.stageScore,
        }
      }),
    }

    if (type == 2) {
      const api =
        route.query.id && route.query?.getType == 2
          ? projectScoreUpdate
          : projectScoreCreate
      if (route.query?.getType == 1) {
        params.draftBoxId = route.query.id
      }
      if (route.query?.getType == 2) {
        params.id = route.query.id
      }
      api(params)
        .then((res) => {
          if (res.code == 0 || res.code == 200) {
            $baseMessage('提交成功')
            closeTabNavigate()
          }
        })
        .finally(() => {
          loading.value = false
        })
    } else {
      const formData = {
        id: route.query?.getType == 1 ? route.query.id : '',
        type: 'KEY_PROJECT_SCORE',
        submitJson: JSON.stringify({
          ...params,
          draftBoxId: route.query?.getType == 1 ? route.query.id : '',
        }),
      }

      postDraftBoxCreate(formData)
        .then((res) => {
          if (res.code == 0 || res.code == 200) {
            $baseMessage('保存草稿成功')
            closeTabNavigate()
          }
        })
        .finally(() => {
          loading.value = false
        })
    }
  }

  onMounted(() => {
    route.query.id && initFormData()
  })
</script>

<style lang="scss" scoped>
  .score-submit-container-padding {
    padding-bottom: 80px !important;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;
    }
  }
</style>
